<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>get</button>
    <button>post</button>
    <button>put</button>
	<button>patch</button>
    <button>delete</button>
    <ul></ul>
    <script>
        const ul = document.querySelector('ul')
        const btns = document.querySelectorAll("button");
        //获取电影列表
        btns[0].onclick = function () {

            // console.log(fetch('http://localhost/movies').then(val=>{
            //     console.log(val.json().then(val=>{
            //         // console.log(val);
            //         val.forEach(item => {
            //             let li = document.createElement('li');
            //             li.innerHTML = item.name;
            //             ul.appendChild(li);
            //         });
            //     }));
            // }));

            // 参数：请求url地址
            fetch('http://localhost/movies')
            .then(val => val.json().then(val => val))
            .then(val => {
                ul.innerHTML='';
                val.forEach(element => {
                    let li = document.createElement('li');
                    li.innerHTML = element.name;
                    ul.appendChild(li);
                });
            });
        }

        // 添加电影
        btns[1].onclick = function(){
            // 参数1：url地址
            // 参数2：配置对象
                // method 请求方式
                // headers 请求头设置
                // body 请求体
            fetch('http://localhost/movies',{
                method:"POST",
                headers:{
                    // "content-type":"application/x-www-form-urlencoded"
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    name:"笑傲江湖",
                    director:"啊啊啊",
                    star:"令狐冲"
                }),
                // body:"name=泰坦尼克号&director=大卫·xxx&star=小李子"
            }).then((val)=>{
                console.log(val);
            });

            // let x = new XMLHttpRequest();
            // x.open('post','http://api.zhibao.com/movies');
            // x.setRequestHeader('content-type','application/json');
            // x.send(JSON.stringify({
            //         name:"笑傲江湖22",
            //         director:"啊啊啊",
            //         star:"令狐冲"
            //     }));
            // x.onload=function(){
            //     console.log(x.response);
            // }
        }
    
        // 修改电影
        btns[2].onclick = function(){
            fetch('http://api.zhibao.com/movies/12',{
                method:"put",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    name:"东邪西毒",
                    director:"吴彦祖",
                    star:"梁朝伟"
                })
            }).then(val=>{
                console.log(val);
            })
        }
        
         // 局部修改电影  - 请求方式大写
        btns[3].onclick = function(){
            fetch('http://api.zhibao.com/movies/12',{
                method:"PATCH",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    name:"东邪西毒222",
                })
            }).then(val=>{
                console.log(val);
            })
        }
    
        // 删除电影
        btns[4].onclick = function(){
            fetch('http://api.zhibao.com/movies/13',{
                method:"delete",
            }).then(val=>{
                console.log(val);
            })
        }
    </script>
</body>
</html>